<div id="app">
    <table style="border:1">
        <!-- 表头 -->
        <tr class="header">
            <td>下标</td>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <!-- 
            通过 v-for 循环渲染多条表格数据，
            使用 key 维护列表的状态：
            当列表数据变化时，默认情况下，vue 会尽可能的复用已存在的 dom 元素，从而提升渲染的性能，但这种策略会导致有状态的列表无法被正确更新。
            为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而保证有状态的列表被正确更新的前提下，提升渲染的性能。
            此时，就需要为每项提供一个唯一的 key 属性，
            下标并不是唯一的，最好不要作为 key 属性的值
         -->
        <tr v-for="(item, index) in userList" :key="item.id">
            <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: [
                { id: 1, username: 'helen', age: 18 },
                { id: 2, username: 'peter', age: 34 },
                { id: 3, username: 'jonson', age: 16 },
                { id: 4, username: 'qiuqian', age: 28 }
            ]
        }
    })
</script>
<style>
    td {
        width: 50px;
        border: 1px solid black;
        text-align: center;
        line-height: 50px;
        padding: 0;
        margin: 0;
    }

    .header td {
        background-color: aliceblue;
    }
</style>